<template>
    <!-- 地图点信息 -->
    <div class="allMarker">
        <AllinMarker :select-arr="selectArr" :select-menu-arr="selectMenu"></AllinMarker>


    </div>
</template>

<script>
    import AllinMarker from "../../../components/allinMarker/AllinMarker";

    import {hotel, tendency, hotelNum} from '../../../axios/public/index'

    import moment from 'moment'

    export default {
        name: "allMarker",
        components: {
            AllinMarker
        },
        data() {
            return {
                selectArr: [
                    {
                        id: 1,
                        name: '酒店',
                        parentId: '4200',
                        imgUrl: require('../../../assets/manage/icon-a.png')
                    }
                ],
                selectMenu: [
                    {
                        id: 1,
                        name: '全部点位',
                    },
                    {
                        id: 1,
                        name: '酒店',
                        parentId: '4200',
                        imgUrl: require('../../../assets/manage/icon-a.png')
                    }
                ],// 选择菜单数组
                map: null,// 地图实例对象
                markerArrList: [],// 点位数组
                markerDataArr: null,//全部数据
                friedArr: null,// 出入闸机点位
                screen: [],// 智能屏幕点位
                irrigation: [],//灌溉点位
                broadcast: [],//广播点位
                infoWindowOpen: null,
                tendencyData: [],//能源数据
                hotelNum: [],//酒店入住7天趋势
            }
        },
        mounted() {
            // setTimeout(() => {
            //     this.map.destroy()
            // }, 5000)
        },
        methods: {
            /**
             * 默认设置所有的点位
             */
            setAllMarker(params, map) {
                this.map = map
                console.log('默认设置所有点位')
                this.markerDataArr = params
                console.log(this.markerDataArr)
                let markerArr = []
                this.markerDataArr.forEach(item => {
                    item.imgurl = this.selectArr[0].imgUrl
                    markerArr.push(item)
                })
                this.setMarkerToMap(markerArr)
                const _this = this
                map.on('click', function () {
                    console.log(_this.infoWindowOpen)
                    if (_this.infoWindowOpen) {
                        _this.infoWindowOpen.close()
                    }
                })
            },
            /*
            * 点位选择
            * */
            selectMarkerItem(data) {

                if (this.markerArrList.length !== 0) {
                    this.map.remove(this.markerArrList)
                }
                if (data.name === "全部点位") {
                    let markerArr = []
                    this.markerDataArr.forEach(item => {
                        markerArr.push(item)
                    })
                    this.setMarkerToMap(markerArr)
                } else if (data.name === "酒店") {
                    let markerArr = []
                    this.markerDataArr.forEach(item => {
                        markerArr.push(item)
                    })
                    this.setMarkerToMap(markerArr)
                }
            },
            /**
             * 手动选择全部点位
             */
            setMarkerToMap(data) {
                console.log(data, '处理后的数据')
                const _this = this
                data.forEach(item => {
                    const marker = new AMap.LabelMarker({
                        position: new AMap.LngLat(Number(item.longitude), Number(item.latitude)),
                        icon: {
                            image: item.imgurl,
                            size: [30, 30],
                        },
                        text: {
                            content: item.equipName,
                            direction: 'bottom',
                            style: {
                                fontSize: 15,
                                fillColor: '#fff',
                                padding: [3, 10],
                                backgroundColor: 'rgba(0, 22, 52, 0.49)',
                            }
                        }
                    });
                    _this.map.add(marker);
                    _this.markerArrList.push(marker)
                    marker.on('click', function () {

                        // console.log(item)
                        hotel(item.deviceId).then(res => {
                            // console.log(res.data,123);
                            let html =
                                '<div class="markerWindow markerWindow_hotel">' +
                                '<div class="title">' +
                                '<img src="' + item.imgurl + '" alt="">' +
                                '<p>' + item.equipName + '</p>' +
                                "<span onclick='clearWindowInfo()'>X</span>" +
                                '</div>' +
                                '<div class="content">' +
                                '<div class="table table_hotel">' +
                                '<div class="item">' +
                                '<p> <span style="font-family:PMZD" >' + res.data.todayHotelInNumber + '</span> 人</p>' +
                                '<p>今日在店人数</p>' +
                                '<span class="border-i top-left"></span>' +
                                '<span class="border-i top-right"></span>' +
                                '<span class="border-i bottom-left"></span>' +
                                '<span class="border-i bottom-right"></span>' +
                                '</div>' +
                                '<div class="item">' +
                                '<p> <span style="font-family:PMZD" >' + res.data.todayHotelBooking + '</span> 间</p>' +
                                '<p>今日总客房数量</p>' +
                                '<span class="border-i top-left"></span>' +
                                '<span class="border-i top-right"></span>' +
                                '<span class="border-i bottom-left"></span>' +
                                '<span class="border-i bottom-right"></span>' +
                                '</div>' +
                                '<div class="item">' +
                                '<p> <span style="font-family:PMZD" >' + res.data.dayWaterValue + '</span> t</p>' +
                                '<p>今日用水量</p>' +
                                '<span class="border-i top-left"></span>' +
                                '<span class="border-i top-right"></span>' +
                                '<span class="border-i bottom-left"></span>' +
                                '<span class="border-i bottom-right"></span>' +
                                '</div>' +
                                '<div class="item">' +
                                '<p><span style="font-family:PMZD" >' + res.data.monthWaterValue + '</span> t</p>' +
                                '<p>当月用水量</p>' +
                                '<span class="border-i top-left"></span>' +
                                '<span class="border-i top-right"></span>' +
                                '<span class="border-i bottom-left"></span>' +
                                '<span class="border-i bottom-right"></span>' +
                                '</div>' +
                                '<div class="item">' +
                                '<p> <span style="font-family:PMZD" >' + res.data.todayHotelNum + '</span> 间</p>' +
                                '<p>今日入住客房数量</p>' +
                                '<span class="border-i top-left"></span>' +
                                '<span class="border-i top-right"></span>' +
                                '<span class="border-i bottom-left"></span>' +
                                '<span class="border-i bottom-right"></span>' +
                                '</div>' +
                                '<div class="item">' +
                                '<p><span style="font-family:PMZD" >' + res.data.todayResidueNum + '</span> 间</p>' +
                                '<p>今日剩余客房数量</p>' +
                                '<span class="border-i top-left"></span>' +
                                '<span class="border-i top-right"></span>' +
                                '<span class="border-i bottom-left"></span>' +
                                '<span class="border-i bottom-right"></span>' +
                                '</div>' + '<div class="item">' +
                                '<p> <span style="font-family:PMZD" >' + res.data.dayGasValue + '</span> m³</p>' +
                                '<p>今日用气量</p>' +
                                '<span class="border-i top-left"></span>' +
                                '<span class="border-i top-right"></span>' +
                                '<span class="border-i bottom-left"></span>' +
                                '<span class="border-i bottom-right"></span>' +
                                '</div>' + '<div class="item">' +
                                '<p> <span style="font-family:PMZD" >' + res.data.monthGasValue + '</span> m³</p>' +
                                '<p>当月用气量</p>' +
                                '<span class="border-i top-left"></span>' +
                                '<span class="border-i top-right"></span>' +
                                '<span class="border-i bottom-left"></span>' +
                                '<span class="border-i bottom-right"></span>' +
                                '</div>' + '<div class="item">' +
                                '<p> <span style="font-family:PMZD" >' + res.data.monthHotelInNumber + '</span> 人</p>' +
                                '<p>当月累计住店人数</p>' +
                                '<span class="border-i top-left"></span>' +
                                '<span class="border-i top-right"></span>' +
                                '<span class="border-i bottom-left"></span>' +
                                '<span class="border-i bottom-right"></span>' +
                                '</div>' +
                                '<div class="item">' +
                                '<p> <span style="font-family:PMZD" >' + res.data.monthHotelLetRatio + '</span> %</p>' +
                                '<p>当月出租率</p>' +
                                '<span class="border-i top-left"></span>' +
                                '<span class="border-i top-right"></span>' +
                                '<span class="border-i bottom-left"></span>' +
                                '<span class="border-i bottom-right"></span>' +
                                '</div>' +
                                '<div class="item">' +
                                '<p> <span style="font-family:PMZD" >' + res.data.dayElectricityValue + '</span> Kwh</p>' +
                                '<p>今日用电量</p>' +
                                '<span class="border-i top-left"></span>' +
                                '<span class="border-i top-right"></span>' +
                                '<span class="border-i bottom-left"></span>' +
                                '<span class="border-i bottom-right"></span>' +
                                '</div>' +
                                '<div class="item">' +
                                '<p> <span style="font-family:PMZD" >' + res.data.monthElectricityValue + '</span> Kwh</p>' +
                                '<p>当月用电量</p>' +
                                '<span class="border-i top-left"></span>' +
                                '<span class="border-i top-right"></span>' +
                                '<span class="border-i bottom-left"></span>' +
                                '<span class="border-i bottom-right"></span>' +
                                '</div>' +
                                '</div>' +
                                '<div class="chart_hotel">' +
                                '<div class="chart_hotel_div">' +
                                '<p>近七天每日酒店在店人数趋势</p>' +
                                '<div id="moreMakeWindow" style="width: 100%;height: 150px;"></div>' +
                                '</div>'+
                                '<div class="chart_hotel_div">' +
                                '<p>今日用电量趋势</p>' +
                                '<div id="sevenLoadWindow" style="width: 100%;height: 150px;"></div>' +
                                '</div>'+
                                '</div>'+
                                '</div>'+
                                '</div>';
                            hotelNum(item.hotelId).then(res => {
                                _this.hotelNum = res.data

                            })
                            tendency(item.deviceId).then(res => {
                                // console.log(res)
                                _this.tendencyData = res.data
                                _this.openWindow(item, marker, html, _this.sevenLoadInit, _this.moreMakeInit)
                            })


                        })
                    })
                })
            },
            // 折线图
            sevenLoadInit() {
                const myChart = this.$echarts.init(document.getElementById('sevenLoadWindow'));
                // const dates = ['05:06', '05:07', '05:08', '05:09', '05:10', '05:11', '05:12'];
                // const loadDatas = [20000, 15000, 16000, 15000, 14000, 20000, 11000];
                const dates = [];
                const loadDatas = [];
                this.tendencyData = this.tendencyData.reverse()
                for (var i = 0; i < this.tendencyData.length; i++) {
                    dates.push(this.tendencyData[i].time);
                    loadDatas.push(this.tendencyData[i].value)
                }
                // console.log(dates, loadDatas)
                const options = {
                    tooltip: {
                        show: true,
                        trigger: 'axis',
                        // transitionDuration: 0,
                        backgroundColor: 'rgba(50,50,50,0.7)',
                        textStyle: {
                            color: '#fff'
                        },
                        borderWidth: '0',
                        formatter: function (params) {
                            let str = ''
                            for (let i = 0; i < params.length; i++) {
                                str += params[i].marker + '' + params[i].seriesName + ' : ' + params[i].data + '<br>'
                            }
                            return str
                        },
                        axisPointer: {
                            lineStyle: {
                                type: 'solid',
                                color: {
                                    type: 'linear',
                                    x: 0,
                                    y: 0,
                                    x2: 0,
                                    y2: 1,
                                    colorStops: [{
                                        offset: 0,
                                        color: 'rgba(0, 255, 233,0)'
                                    }, {
                                        offset: 0.5,
                                        color: 'rgba(255, 255, 255,1)'
                                    }, {
                                        offset: 1,
                                        color: 'rgba(0, 255, 233,0)'
                                    }],
                                    global: false
                                }
                            }
                        }
                    },
                    grid: {
                        top: 38,
                        left: 54,
                        right: 10,
                        bottom: '11%'
                    },
                    xAxis: {
                        data: dates,
                        axisTick: {
                            show: false
                        },
                        axisLine: {
                            lineStyle: {
                                type: 'dashed',
                                color: 'rgba(48,178,236,0.6)'
                            }
                        },
                        axisLabel: {
                            color: '#B2CEEC',
                            fontSize: 10,
                        }
                    },
                    yAxis: {
                        name: '(Kwh)',
                        nameTextStyle: {
                            color: "#B2CEEC",
                            fontSize: 10,
                            padding: [0, 0, 0, -50]
                        },
                        axisLabel: {
                            color: '#B2CEEC',
                            fontSize: 10
                        },
                        axisLine: {
                            show: false,
                        },
                        splitLine: {
                            show: true,
                            lineStyle: {
                                type: 'dashed',
                                color: 'rgba(48,178,236,0.6)'
                            }
                        },
                        splitNumber: 3,
                        // minInterval: 1
                    },
                    series: [{
                        name: '用电量',
                        type: 'line',
                        data: loadDatas,
                        lineStyle: {
                            color: '#32E9FF',
                            width: 3
                        },
                        itemStyle: {
                            color: '#32E9FF',
                        },
                        symbolSize: 0,
                        symbol: 'circle',
                        smooth: false,
                        areaStyle: {
                            color: {
                                type: 'linear',
                                x: 0,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                colorStops: [{
                                    offset: 0, color: 'rgba(50,233,255,0.4)' // 0% 处的颜色
                                }, {
                                    offset: 1, color: 'rgba(50,233,255,0.4)' // 100% 处的颜色
                                }],
                                global: false // 缺省为 false
                            }
                        }
                    }]
                }
                myChart.setOption(options)
            },
            // 柱状图
            moreMakeInit() {
                var myChart = this.$echarts.init(document.getElementById('moreMakeWindow'));
                let makeNames = [];
                let makeRates = [];
                for (var i = 0; i < this.hotelNum.length; i++) {
                    makeNames.push(moment(this.hotelNum[i].time).format('MM.DD'))
                    makeRates.push(this.hotelNum[i].value)
                }
                var option = {
                    tooltip: {
                        show: true,
                        trigger: 'axis',
                        // transitionDuration: 0,
                        backgroundColor: 'rgba(50,50,50,0.7)',
                        textStyle: {
                            color: '#fff'
                        },
                        borderWidth: '0',
                        formatter: function (params) {
                            let str = ''
                            for (let i = 0; i < params.length; i++) {
                                str += params[i].marker + '' + params[i].name + ' : ' + params[i].data + '<br>'
                            }
                            return str
                        },
                        axisPointer: {
                            lineStyle: {
                                type: 'solid',
                                color: {
                                    type: 'linear',
                                    x: 0,
                                    y: 0,
                                    x2: 0,
                                    y2: 1,
                                    colorStops: [{
                                        offset: 0,
                                        color: 'rgba(0, 255, 233,0)'
                                    }, {
                                        offset: 0.5,
                                        color: 'rgba(255, 255, 255,1)'
                                    }, {
                                        offset: 1,
                                        color: 'rgba(0, 255, 233,0)'
                                    }],
                                    global: false
                                }
                            }
                        }
                    },
                    grid: {
                        top: 38,
                        left: 40,
                        right: 10,
                        bottom: '11%'
                    },
                    xAxis: {
                        data: makeNames,
                        axisTick: {
                            show: false
                        },
                        axisLine: {
                            lineStyle: {
                                type: 'dashed',
                                color: 'rgba(48,178,236,0.6)'
                            }
                        },
                        axisLabel: {
                            color: '#B2CEEC',
                            fontSize: 10,
                            interval: 0,
                        }
                    },
                    yAxis: {
                        name: '(人)',
                        nameTextStyle: {
                            color: "#B2CEEC",
                            fontSize: 10,
                            padding: [0, 0, 0, -37]
                        },
                        axisLabel: {
                            color: '#B2CEEC',
                            fontSize: 10,
                            formatter: '{value}'
                        },
                        axisLine: {
                            show: false,
                        },
                        splitLine: {
                            show: true,
                            lineStyle: {
                                type: 'dashed',
                                color: 'rgba(48,178,236,0.6)'
                            }
                        },
                        splitNumber: 4,
                        minInterval: 1,
                    },
                    series: [{
                        name: '人数',
                        type: 'bar',
                        data: makeRates,
                        barCategoryGap: 55,
                        barWidth: 16,
                        itemStyle: {
                            color: '#32E9FF'
                        }
                    }]
                }
                myChart.setOption(option)
            },
            /*
            * 打开弹窗事件
            * */
            openWindow(item, marker, html, callback, callbacks) {
                const infoWindow = new AMap.InfoWindow({
                    isCustom: true,  //使用自定义窗体
                    content: html, //使用默认信息窗体框样式，显示信息内容
                    offset: new AMap.Pixel(-10, -30),
                    anchor: "top-left"
                });
                infoWindow.open(this.map, marker.getPosition());
                this.infoWindowOpen = infoWindow
                window.clearWindowInfo = function () {
                    infoWindow.close()
                }
                if (callback) {
                    callback()
                }
                if (callbacks) {
                    callbacks()
                }

            }
        },
        beforeDestroy() {
            this.map.remove(this.markerArrList)
            if (this.infoWindowOpen !== null) {
                this.infoWindowOpen.close()
            }
        }
    }
</script>

<style scoped lang="scss">

</style>